<template>
  <div
    class="addBlock-content"
    v-if="isShowAddMenu == true || showUpload == true"
    style="z-index: 2001"
    @mousewheel.prevent
    @click="
      $store.commit('mutationIsShowAddMenu', false);
      showUpload = false;
    "
  >
    <div
      class="dropdown-menu"
      ref="dropdownMenu"
      v-if="isShowAddMenu"
      :style="{
        top: getterAddMenuContentLayerXY.y + 'px',
        left: getterAddMenuContentLayerXY.x + 'px',
      }"
      @click.stop
      @mousewheel.stop
    >
      <div v-for="(item, index) in addBlockInfoArray" :key="index">
        <span class="block-type-tip" v-if="item.type == 'text'">基础模块</span>
        <span class="block-type-tip" v-if="item.type == 'image'"
          >媒体和数据</span
        >
        <div
          class="block-item"
          :tabindex="index"
          :class="tabindex == index ? 'active-block-item' : ''"
          @click.stop="setAddBlockInfo(item.type)"
        >
          <div class="block-item-img">
            <img :src="getImgUrl(item.type)" style="width: 100%" />
          </div>
          <div class="block-item-intro">
            <h4>{{ item.name }}</h4>
            <span>{{ item.tip }}</span>
          </div>
        </div>
      </div>
    </div>

    <div
      class="dropdown-upload"
      @click.stop
      v-if="showUpload"
      :style="{
        top: getterAddMenuContentLayerXY.y1 + 'px',
        left: getterAddMenuContentLayerXY.x + 'px',
      }"
    >
      <div class="upload-header">
        <div
          class="tab"
          :class="uploadActive == 0 ? 'active' : ''"
          @click.stop="uploadActive = 0"
        >
          上传{{ uploadType == "image" ? "图片" : "视频" }}
        </div>
        <div
          class="tab"
          :class="uploadActive == 1 ? 'active' : ''"
          @click.stop="uploadActive = 1"
        >
          {{ uploadType == "image" ? "图片" : "视频" }}链接
        </div>
      </div>
      <div class="upload-content" v-if="uploadActive == 0">
        <el-upload
          class="upload-demo"
          action="https://jsonplaceholder.typicode.com/posts/"
          :on-remove="handleRemove"
          :http-request="httpRequest"
          list-type="picture"
          :accept="uploadType == 'image' ? '.jpg,.png,.jpeg,.svg' : '.mp4'"
        >
          <el-button style="width: 100%" class="btn" size="small" type="primary"
            >选择{{ uploadType == "image" ? "图片" : "视频" }}</el-button
          >
        </el-upload>
      </div>
      <div class="upload-content" v-if="uploadActive == 1">
        <input
          type="text"
          v-model="fileLink"
          :placeholder="`请填写${uploadType == 'image' ? '图片' : '视频'}链接`"
        />
        <div class="btn" @click.stop="insertFile">
          插入{{ uploadType == "image" ? "图片" : "视频" }}
        </div>
      </div>
    </div>
  </div>
</template>


<script>
// @ is an alias to /src
export default {
  name: "addBlock-content",
  data() {
    return {
      showUpload: false,
      uploadType: "image",
      uploadActive: 0, // 上传tab
      fileLink: "", // 图片地址
      tabindex: -1, // 当前菜单tab index
      addBlockInfoArray: [
        {
          name: "纯文本",
          tip: "用纯文本开始写内容",
          type: "text",
        },
        {
          name: "标题1",
          tip: "大字号标题",
          type: "heading1",
        },
        {
          name: "标题2",
          tip: "中字号标题",
          type: "heading2",
        },
        {
          name: "标题3",
          tip: "小字号标题",
          type: "heading3",
        },
        {
          name: "待办清单",
          tip: "用待办清单去追踪任务",
          type: "todo",
        },
        {
          name: "符号列表",
          tip: "大字号标题",
          type: "bulletedList",
        },
        // {
        //   name: "数字列表",
        //   tip: "大字号标题",
        //   type: "numberedList",
        // },
        {
          name: "提示栏",
          tip: "用于提示比较重要的信息",
          type: "hint",
        },
        {
          name: "图片",
          tip: "用于提示比较重要的信息",
          type: "image",
        },
        {
          name: "视频",
          tip: "用于提示比较重要的信息",
          type: "video",
        },
      ],
    };
  },
  watch: {},
  computed: {
    isShowAddMenu() {
      return this.$store.state.isShowAddMenu;
    },
    currentBlockIndex() {
      return this.$store.state.currentBlockIndex;
    },
    getterAddMenuContentLayerXY() {
      return this.$store.getters.getterAddMenuContentLayerXY;
    },
    currentPageBlocks() {
      return this.$store.state.currentPageBlocks;
    },
  },
  mounted() {
    document.onkeydown = (event) => {
      let e = event || window.event || arguments.callee.caller.arguments[0];
      // 下键
      if (e.keyCode == 40 && this.isShowAddMenu) {
        this.tabindex++;
        if (this.tabindex > this.addBlockInfoArray.length - 1)
          this.tabindex = 0;
        if (this.$refs.dropdownMenu)
          if (this.tabindex > 4) {
            this.$refs.dropdownMenu.scrollTop = this.tabindex * 60;
          } else {
            this.$refs.dropdownMenu.scrollTop = 0;
          }
      }
      // 上键
      if (e.keyCode == 38 && this.isShowAddMenu) {
        this.tabindex--;
        if (this.tabindex < 0)
          this.tabindex = this.addBlockInfoArray.length - 1;
        if (this.$refs.dropdownMenu)
          if (this.tabindex > 4) {
            this.$refs.dropdownMenu.scrollTop = this.tabindex * 60;
          } else {
            this.$refs.dropdownMenu.scrollTop = 0;
          }
      }
      // enter 添加块
      if (e.keyCode == 13 && this.isShowAddMenu) {
        if (
          this.tabindex >= 0 &&
          this.tabindex < this.addBlockInfoArray.length
        ) {
          this.setAddBlockInfo(this.addBlockInfoArray[this.tabindex].type);
        }
      }
    };
  },
  methods: {
    addBlock(addBlockInfo) {
      this.$store.commit("mutationAddCurrentPageBlocks", addBlockInfo);
      // 当添加模块为text 并且内容为空时,替换当前模块
      if (
        this.currentPageBlocks[this.currentBlockIndex].type == "text" &&
        this.currentPageBlocks[this.currentBlockIndex].data.html == ""
      ) {
        // 处理光标的显示问题，在当前模块显示
        this.currentPageBlocks.splice(this.currentBlockIndex, 1);
        setTimeout(() => {
          let dom = document.getElementsByClassName("edit");
          let currInput = dom[this.currentBlockIndex];
          currInput.focus();
        }, 200);
      } else {
        // 处理光标的显示问题，新建后光标移到新建栏
        setTimeout(() => {
          let dom = document.getElementsByClassName("edit");
          let nextInput = dom[this.currentBlockIndex + 1];
          nextInput.focus();
        }, 200);
      }
    },
    setAddBlockInfo(type) {
      var addBlockInfo = {
        index: this.currentBlockIndex,
        blockItem: {
          type: type,
          data: {
            html: "",
            text: "",
          },
        },
      };
      if (type == "todo") addBlockInfo.blockItem.data.isChecked = false;
      if (type == "image" || type == "video") {
        this.uploadType = type;
        this.showUpload = true;
      } else {
        this.addBlock(addBlockInfo);
      }
      this.$store.commit("mutationIsShowAddMenu", false);
    },
    // 选择文件上传
    httpRequest() {},
    handleRemove(file, fileList) {
      console.log("删除", file, fileList);
    },
    // 插入文件
    insertFile() {
      var format1 = ["mp4"],
        format2 = ["jpg", "png", "jpeg", "svg"],
        arr1 = format1.filter((item) => {
          return this.fileLink.indexOf(item) >= 0;
        }),
        arr2 = format2.filter((item) => {
          return this.fileLink.indexOf(item) >= 0;
        }),
        fileHtml =
          this.uploadType == "image"
            ? `<img src="${this.fileLink}" style="width:60%;height:auto;"></img>`
            : `<video src="${this.fileLink}" style="width:60%;height:auto;" controls></video>`;
      if (
        (arr1.length > 0 && this.uploadType == "video") ||
        (arr2.length > 0 && this.uploadType == "image")
      ) {
        var addBlockInfo = {
          index: this.currentBlockIndex,
          blockItem: {
            type: this.uploadType,
            data: {
              html: fileHtml,
              text: this.fileLink,
            },
          },
        };
        this.addBlock(addBlockInfo);
        this.fileLink = "";
        this.showUpload = false;
      } else {
        console.log("链接格式不对");
      }
    },
    getImgUrl(type) {
      return require("@/assets/" + type + ".png");
    },
  },
  beforeDestroy() {
    document.onkeydown = undefined;
  },
};
</script>


<style lang="less">
*::selection {
  background: rgba(45, 170, 219, 0.3);
}
.addBlock-content {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  margin: 0;
  .dropdown-upload {
    background: #ffffff;
    position: absolute;
    z-index: 2002;
    width: 450px;
    height: 200px;
    overflow-y: auto;
    border: 1px solid #dcdfe6;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 12px 0px;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    .upload-header {
      height: 45px;
      display: flex;
      align-items: center;
      border-bottom: 1px solid #eee;
      .tab {
        margin: 0 20px;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        border-bottom: 2px solid transparent;
        font-size: 15px;
      }
      .tab.active {
        border-color: rgb(34, 93, 255);
      }
    }
    .upload-content {
      display: flex;
      flex-direction: column;
      flex: 1;
      align-items: center;
      justify-content: space-around;
      padding: 20px 0;
      overflow-y: scroll;
      &::-webkit-scrollbar {
        display: none; // 重点
      }
      .upload-demo {
        width: 80%;
        .el-upload {
          width: 100%;
        }
        .el-upload-list {
          height: auto !important;
          .el-upload-list__item {
            height: auto !important;
            display: flex;
            align-items: center;
            .el-upload-list__item-name {
              margin: 0 !important;
            }
          }
        }
        .el-upload-list__item-thumbnail {
          width: 45px !important;
          height: auto !important;
        }
        .el-icon-document {
          font-size: 45px;
        }
      }
      input {
        width: 90%;
        outline: none !important;
        height: 35px;
        border: 1px solid rgb(199, 199, 199);
        border-radius: 4px;
        padding: 0 10px;
      }
      .btn {
        width: 60%;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        border-radius: 4px;
        background-color: #1e92ff;
        color: #fff;
      }
    }
  }
  .dropdown-menu {
    background: #ffffff;
    position: absolute;
    // margin-left: 58px;
    z-index: 2002;
    width: 320px;
    height: 360px;
    overflow-y: scroll;
    border: 1px solid #dcdfe6;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 12px 0px;
    border-radius: 4px;
    &::-webkit-scrollbar {
      background: transparent;
    }
    &::-webkit-scrollbar {
      width: 10px;
      height: 10px;
    }
    &::-webkit-scrollbar-thumb {
      background: #d3d1cb !important;
    }
    &::-webkit-scrollbar-track {
      background: #edece9 !important;
    }

    .block-type-tip {
      font-size: 12px;
      color: #909399;
      display: block;
      padding: 10px 20px 5px 20px;
    }
    .block-item {
      padding: 5px 20px 7px 20px;
      display: flex;
      align-items: center;
      background: #ffffff;
      .block-item-img {
        width: 45px;
        height: 45px;
        background: #ffffff;
        img {
          border-radius: 4px;
          border: 1px solid #dddddd;
        }
      }
      .block-item-intro {
        h4 {
          margin: 0;
          font-size: 14px;
        }
        span {
          font-size: 12px;
          color: #909399;
        }
        margin-left: 10px;
      }
    }
    .block-item:hover {
      background: #eeeeee;
      cursor: pointer;
    }
    .active-block-item {
      background: #eeeeee;
      cursor: pointer;
    }
  }
}
</style>
